<template>
	<view>
		<block v-for='(item, index) in list' :key="index">			
			<view class="flex align-start p-3 pr-0 pb-0" hover-class="bg-hover-light">
				<view class="mr-3 font-0">
					<uni-badge class="uni-badge-left-margin" :text="item.unread" absolute="rightTop" size="small" type="error">
						<image :src="item.avatar" mode="aspectFit"
						style="height: 100rpx; width: 100rpx;" class="rounded"></image>
					</uni-badge>
				</view>
				<view class="flex flex-column flex-1 justify-between" style="height: 120rpx;">
					<view class="flex align-center justify-between mr-3">
						<text class="font-md text-ellipsis"  style="max-width: 298rpx;">{{ item.username }}</text>
						<text class="font-sm text-secondary">{{ item.add_time | formatTime }}</text>
					</view>
					<view class="font-sm text-secondary mr-3 mt-1 text-ellipsis" style=" max-width: 500rpx;">
						{{ item.content }}
					</view>
					<view class="border-bottom flex-1 border-light-secondaryf font-0" style="height: 15rpx; border-bottom-width: .5rpx;"></view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import uniBadge from '../../components/uni-ui/uni-badge/uni-badge.vue'
	import $T from '../../common/time.js'
	export default {
		data() {
			return {
				title: '商信',
				unreadCount: 100,//未读消息
				list: [
					{
						avatar: 'https://up.enterdesk.com/2021/edpic/c4/9f/09/c49f090757360f843141fe2bab2cfc8f_1.jpg',
						username: '简单爱',
						add_time: '1636881259',
						content: '北交所开始啦！这里门前有点热闹！',
						unread: 20
					},
					{
						avatar: 'https://b-ssl.duitang.com/uploads/item/201703/01/20170301175637_cTMw4.thumb.700_0.jpeg',
						username: '江苏昊视科技发展有限公司荣誉出品',
						add_time: '1633881459',
						content: '第三针免疫要不要打，终南山最新权威解答，14亿中国人都改听一听',
						unread: 100
					},
					{
						avatar: 'https://up.enterdesk.com/2021/edpic/70/28/34/7028349fdd7ac17158945a70847fba0b_1.jpg',
						username: '扬州人',
						add_time: '1636685259',
						content: '好的',
						unread: 90
					},
					{
						avatar: 'https://up.enterdesk.com/2021/edpic/c4/9f/09/c49f090757360f843141fe2bab2cfc8f_1.jpg',
						username: '简单爱',
						add_time: '1636881259',
						content: '北交所开始啦！这里门前有点热闹！',
						unread: 20
					},
					{
						avatar: 'https://b-ssl.duitang.com/uploads/item/201703/01/20170301175637_cTMw4.thumb.700_0.jpeg',
						username: '江苏昊视科技发展有限公司荣誉出品',
						add_time: '1633881459',
						content: '第三针免疫要不要打，终南山最新权威解答，14亿中国人都改听一听',
						unread: 100
					},
					{
						avatar: 'https://up.enterdesk.com/2021/edpic/70/28/34/7028349fdd7ac17158945a70847fba0b_1.jpg',
						username: '扬州人',
						add_time: '1636685259',
						content: '好的',
						unread: 90
					},
					{
						avatar: 'https://up.enterdesk.com/2021/edpic/c4/9f/09/c49f090757360f843141fe2bab2cfc8f_1.jpg',
						username: '简单爱',
						add_time: '1636881259',
						content: '北交所开始啦！这里门前有点热闹！',
						unread: 20
					},
					{
						avatar: 'https://b-ssl.duitang.com/uploads/item/201703/01/20170301175637_cTMw4.thumb.700_0.jpeg',
						username: '江苏昊视科技发展有限公司荣誉出品',
						add_time: '1633881459',
						content: '第三针免疫要不要打，终南山最新权威解答，14亿中国人都改听一听',
						unread: 100
					},
					{
						avatar: 'https://up.enterdesk.com/2021/edpic/70/28/34/7028349fdd7ac17158945a70847fba0b_1.jpg',
						username: '扬州人',
						add_time: '1636685259',
						content: '好的',
						unread: 90
					},
					{
						avatar: 'https://up.enterdesk.com/2021/edpic/c4/9f/09/c49f090757360f843141fe2bab2cfc8f_1.jpg',
						username: '简单爱',
						add_time: '1636881259',
						content: '北交所开始啦！这里门前有点热闹！',
						unread: 0
					},
					{
						avatar: 'https://b-ssl.duitang.com/uploads/item/201703/01/20170301175637_cTMw4.thumb.700_0.jpeg',
						username: '江苏昊视科技发展有限公司荣誉出品',
						add_time: '1633881459',
						content: '第三针免疫要不要打，终南山最新权威解答，14亿中国人都改听一听',
						unread: 0
					},
					{
						avatar: 'https://up.enterdesk.com/2021/edpic/70/28/34/7028349fdd7ac17158945a70847fba0b_1.jpg',
						username: '扬州人',
						add_time: '1636685259',
						content: '好的',
						unread: 0
					}
				]
			}
		},
		onLoad() {
			/* 设置头部标题 */
			uni.setNavigationBarTitle({
				title: this.title + '(' + this.unreadCount + ')'
			});
			
		},
		components:{
			uniBadge
		},
		methods: {

		},
		filters: {
			formatTime(t) {
				return $T.gettime(t)
			}
		}
	}
</script>

<style>
	
</style>
